<template>
	<view class="container">
		<!-- <view v-show="scroll>600"> -->
			<navbar :config="config" backColor="#000"></navbar>
		<!-- </view> -->
		<view class="backClass">
			<!-- <image :src="imgUrl+'/order/back.png'" @click="backFun" class="backImage"> -->
				<!-- <u-icon name="arrow-left" class="backClassSearch" color="#020202" size="31" @click="backFun"></u-icon> -->
				<swiper class="swiper" indicator-dots="true" autoplay="true" interval="5000" duration="1500"
					circular="true">
					<swiper-item v-if="dataForm.video_url">
						<!-- <video enable-progress-gesture="false" :src="dataForm.video_url"></video>
			-->
						<j-video class="jvideo" :url="dataForm.video_url" width="750rpx" height="620rpx">
						</j-video>
					</swiper-item>
					<swiper-item v-for="(item, index) in imglist" :key="index">
						<image :src="item"></image>
					</swiper-item>
				</swiper>

		</view>
		<view id="page-top">
			<view class="product">
				<view class="productView">
					<!-- <image src="https://zhongyi-shop.oss-cn-beijing.aliyuncs.com/songhe/weixin/static/delImg/product2.png" mode="aspectFill"></image> -->


					<view class="picTop">
						<view class="picTopLeft">
							<view class="tag" v-if="getTradeTypeName(dataForm.trade_type_id) != null">
								{{getTradeTypeName(dataForm.trade_type_id)}}
							</view>
							<view v-if="dataForm.platform_store" class="tag" style="vertical-align: middle;">
								自营</view>
							<view class="picTopOne">
								<rich-text :nodes="$mUtil.priceBigSmallTwo(dataForm.min_sale_price)"></rich-text>
							</view>

							<text class="picTopTwo">￥{{ dataForm.max_market_price }}</text>
							<!-- <text class="discount u-font24 u-ml15">
									{{((dataForm.min_sale_price / dataForm.max_market_price) *10).toFixed(1)}}折
								</text> -->
						</view>
						<text class="picTopThree">
							贡献值：{{ $mUtil.isToFixedNum(dataForm.consumption_value, 2) }}
						</text>
					</view>

					<!-- style="margin-top: 100rpx;" -->
					<view>

						<view class="shopTitle" style="vertical-align: middle;">{{dataForm.title}}</view>

						<view class="sold">

							<text>已售
								<text>{{ dataForm.result_sale_num }}</text>件，仅剩<text>{{ dataForm.residual_inventory}}</text>件</text>
						</view>
						<!--优惠-->
						<view class="bg-FFF6EE pd20 u-mt20 u-flex-center br-rd10" v-if="shopDiscounts.is_use == true">
							<view class="u-FF0000 br-FF0000 u-font24">首单优惠</view>
							<view class="u-ml15 u-font24 u-CA7E57">满{{ shopDiscounts.full }}元减{{
			              shopDiscounts.reduction
			            }}元</view>
						</view>
					</view>
				</view>

				<view class="shopStore">
					<view class="u-flex-center">
						<view @click="goShop">
							<image class="avatarView" :src="shop.logo"></image>
						</view>
						<view class="shopName">
							<view>{{ shop.shop_name }} </view>
							<view @click="goLocal">
								<!-- <text class="iconfont" style="color: #3775F6;">&#xe6db;</text> -->
								{{ shop.province_name }}{{ shop.city_name }}{{ shop.area_name
			            }}{{ shop.address }}
							</view>
						</view>
					</view>

					<image class="rightImage" @click="goShop" :src="imgUrl+'/personal/huiRight.png'"></image>

				</view>
			</view>


			<!-- <view class="userComments" @tap="change(1)">
				<view class="userCommentsItem" :class="{ active: isChecked == 1 }">
					用户评论({{ commentList.length }})
				</view>
				<image class="rightImage" src="../../../personal/huiRight.png"></image>
			</view> -->
			<view style="padding-bottom: 150rpx;">
				<!-- :style="Style" -->
				<view class="tab" :class="scroll>600 ? 'width100' : ''">
					<view class="box-border">
						<view @tap="change(0)" class="tabColor">
							<view :class="{ active: isChecked == 0 }" class="tabColorTitle">商品详情</view>
						</view>
						<view @tap="change(1)" class="tabColor">
							<view class="tabColorTitle" :class="{ active: isChecked == 1 }">
								用户评论({{ commentList.length }})</view>
						</view>
					</view>
				</view>
				<view>
					<!--商品详情-->
					<view v-if="isChecked == 0">
						<view class="richText ql-editor-box">
							<rich-text :nodes="goodsInfo.mobile_detail"></rich-text>
							<!-- <jyf-parser :html="$mUtil.formatRichText(goodsInfo.mobile_detail)" ref="article">
							</jyf-parser> -->
						</view>
					</view>

					<!--评论-->
					<view v-if="isChecked == 1">
						<comment :value="commentList"></comment>
					</view>
				</view>
			</view>
		</view>
		<view>
			<view class="bottom-btn u-bg-fff">
				<view class="leftbox">

					<button v-if="!isCollection" @click="collection" class="u-text-center collcat"
						style="line-height: 40rpx">
						<!-- <view class="iconfont2 u-font36 u-999">&#xe6bf;</view> -->
						<image :src="imgUrl+'/goods/one.png'" class="buttom-img"></image>
						<view class="viewClass">收藏</view>
					</button>
					<button v-else class=" collcat" @click="collection" style="line-height: 40rpx">
						<!-- <view class="iconfont2 u-999 collectionActive">&#xe616;</view> -->
						<!-- <image
								src="https://zhongyi-shop.oss-cn-beijing.aliyuncs.com/songhe/weixin/static/convenienceService/light-start.png"
								class="buttom-img"></image> -->
						<image :src="imgUrl+'/goods/light-start.png'" class="buttom-img"></image>
						<view class="viewClass">收藏</view>

					</button>
					<button @click="share" class="u-text-center collcat" style="line-height: 40rpx">
						<!-- <view class="iconfont2 u-font44 u-999">&#xe684;</view> -->
						<image :src="imgUrl+'/goods/two.png'" class="buttom-img"></image>
						<view class="viewClass">分享</view>
					</button>
					<view class="collcat" style="line-height: 40rpx">
						<!-- <view class="u-text-center collcat">
							<image :src="imgUrl+'/goods/three.png'" class="buttom-img">
							</image>
							<view class="viewClass">购物车</view>
						</view> -->

						<view @click="goIm" class="u-text-center collcat">
							<image :src="imgUrl+'/goods/kefu.png'" class="buttom-img"></image>
							</image>
							<view class="viewClass">客服</view>
						</view>
						<!-- <view class="number u-font20 u-FFF">10</view> -->
					</view>
				</view>
				<!--普通商品-->
				<!-- <view class="u-flex-center" v-if="ispay"> -->
				<view class="u-flex-center" v-if="dataForm.area_feature != 1">
					<button class="cart-btn" @click="buy(0, dataForm.id)" v-if="dataForm.area_feature != 1">
						加入购物车
					</button>
					<button class="buy-btn" @click="buy(1, dataForm.id)">
						立即购买
					</button>
				</view>

				<view class="u-flex-center" v-else>

					<button class="buy-btnXin" @click="buy(1, dataForm.id)">
						立即购买
					</button>
				</view>
			</view>
		</view>
		<!--规格-->
		<uniPopup type="bottom" ref="specOpen">
			<view class="u-bg-fff spec">
				<view class=" flex-sb u-border-one-one ">
					<view class="u-flex-center">
						<image class="shopImage" :src="choseConfig.cover ? choseConfig.cover : cover"></image>
						<view class="priceView">
							<view class="price-zhe">
								<view class="price-zhe-left">
									<rich-text
										:nodes="$mUtil.priceBigSmall(choseConfig.sale_price ? choseConfig.sale_price : moPrice)">
									</rich-text>
								</view>

								<text
									class="price-zhe-right">￥{{ choseConfig.market_price ? choseConfig.market_price : moDelPrice }}
								</text>
								<!-- <text class="u-ml10">7.5折</text> -->
							</view>
							<view class="inventory">库存 {{ stock }} 件</view>
							<view class="selectView">
								<text class="selectViewText">已选</text>
								<text
									class="selectViewName">{{ choseConfig.sku_set_name ? choseConfig.sku_set_name : "请选择" }}</text>
							</view>
						</view>
					</view>
					<image :src="imgUrl+'/goods/close.png'" class="closeImage" @click="specOpenClose">
					</image>
				</view>
				<view>
					<!-- overHeight -->
					<view class="specifications marginLeft39">
						<view v-for="(item, index) in skuTab" :key="item.head.id">
							<view class="specificationsTitle">{{ item.head.name }}</view>
							<view class="specifications marginTop19">
								<view class="spec-item" :class="childrenItem.flag ? 'activeColor' : ''"
									@click="chonseSku(index, childrenItem.id)" v-for="childrenItem in item.values"
									:key="childrenItem.id">{{ childrenItem.name }}</view>
							</view>
						</view>
					</view>

					<view class="numView">
						<view class="payNum">
							<view class="numViewClass">数量</view>
							<!-- 服务体系礼包、免费商品、公益申领不能一次购买多个 -->
							<!-- <view v-if="/^(1|3)$/.test(dataForm.area_feature) || dataForm.free" class="u-flex-center">
								<view class="num" style="border: none;">{{ add_num }}</view>
							</view> -->
							<view class="u-flex-center">
								<view class="iconfont minus" @click="resNum">&#xe60b;</view>
								<view class="num">{{ add_num }}</view>
								<view class="iconfont plus-sign" @click="addNum">&#xe686;</view>
							</view>
						</view>
						<view class="btnView">
							<view v-if="btnType == 0">
								<button @click="btnBuy(btnType)">
									{{ btnName }}
								</button>
							</view>
							<view v-else>
								<button @click="btnBuy(btnType)">
									{{ btnName }}
								</button>
							</view>
						</view>
					</view>
				</view>
			</view>
		</uniPopup>
		<!--页面加载动画-->
		<ldLoading isFullScreen :active="loading"></ldLoading>
		<share ref="shares" :contentHeight="580" v-if="isvisible"></share>
		<!-- 服务体系礼包才有的弹窗 -->
		<uni-popup class="tip-popup" ref="submitPopup" type="center" :mask-click="false">
			<view class="content-box">
				<view class="title">请确认所属区域</view>
				<scroll-view scroll-y style="max-height: 80vh;box-sizing: border-box;">
					<view class="content">
						<view v-for="(item,index) in areaLevel" :key="index">
							<view class="check-tip"
								:class="dataForm && (dataForm.service_package_area != 7 || index<=0)?'required':''">
								请选择{{item.levelName}}</view>
							<picker class="pickerList" :range="areaList[index]" range-key="label"
								@change="e=>areaChange(e,index)">
								<view class="check-input">
									<textarea v-if="dataForm && dataForm.service_package_area == 7" disabled auto-height
										v-model="checkAreaList[index][item.propName]"
										:placeholder="'请选择所属'+item.levelName"
										placeholder-style="font-size:24rpx;line-height:40rpx"></textarea>
									<textarea v-else disabled auto-height v-model="checkAreaList[0][item.propName]"
										:placeholder="'请选择所属'+item.levelName"
										placeholder-style="font-size:24rpx;line-height:40rpx"></textarea>
									<text class="iconfont2">&#xe65f;</text>
								</view>
							</picker>
						</view>
						<button v-if="dataForm && dataForm.service_package_area == 7 && areaLevel.length < 7"
							@click="addArea()" class="add-area">继续选择其它省</button>
						<view class="tip">
							注意：请认证选择所属区域，选择和自身属地收益相关
						</view>
						<view class="btn-box">
							<button @click="closePopup()">取消</button>
							<button @click="submitByService()">继续购买</button>
						</view>
					</view>
				</scroll-view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import uniPopup from "../../../components/uni-popup/uni-popup.vue";
	import comment from "../../../components/ld-comment/ld-comment.vue";
	import jyfParser from "../../../components/jyf-parser/jyf-parser";
	import share from "./../../public/share";
	import jVideo from "../../../components/j-video/j-video.vue"
	let app = getApp()
	export default {
		components: {
			uniPopup,
			comment,
			jyfParser,
			share,
			jVideo
		},
		data() {
			return {
				scroll: 0,
				//手机状态栏高度
				statusBarHeight: uni.getSystemInfoSync().statusBarHeight,
				config: {
					back: true, //false是tolbar页面 是则不写
					title: '商品详情',
					color: '#000',
					//背景颜色;参数一：透明度（0-1）;参数二：背景颜色（array则为线性渐变，string为单色背景）
					backgroundColor: [1, "#ffffff"],
					statusBarFontColor: '#1A1A1A',
					backIconColor: "#000",

				},
				imglist: [], //详情图片数组
				isChecked: 0,
				btnName: "",
				btnType: "", //0  购物车，1 立即购买
				dataForm: {}, //商品详情
				shop: {}, //店铺信息
				shopDiscounts: {}, //店铺首单优惠
				stock: 0,
				cover: "",
				loading: true,
				moDelPrice: "",
				moPrice: "",
				goodsSkuList: [], //sku组合值
				skuTab: [], //sku二位数组
				goods_id: null,
				limit_buy_num: 0,
				choseConfig: {},
				hasId: "",
				add_num: 1,
				goStatus: 0, //0:购物车，1下单
				shop_id: 0,
				commentList: [],
				goodsInfo: {},
				dataShopId: "",
				isvisible: false,
				isCollection: false, //是否收藏
				option: null,
				imgUrl: this.$mConfig.staticUrl,
				ispay: app.globalData.openPay,
				fromShare: false, // 是否分享过来的页面
				carNums: 0, // 购物车数量
				detail: null,
				// 省市区、街道、社区
				areaList: [
					[],
					[],
					[],
					[],
					[]
				],
				areaIndex: [0, 0, 0, 0, 0],
				checkAreaList: [{
					province_name: '',
					province_code: '',
					city_name: '',
					city_code: '',
					area_name: '',
					area_code: '',
					street_name: '',
					street_code: '',
					community_name: '',
					community_code: ''
				}],
				areaLevel: [], //省，市，区，街道，社区
				third: false,
				trade_type_id: 0,
				paymentPage: '', // 父页面类型
				exchangeType: '', // 父页面类型
			}
		},
		onShow() {
			var pages = getCurrentPages();
			var prevPage = pages[pages.length - 2];
			if (prevPage == undefined) {
				// this.config.backTabPage = "/pages/research/homepage/lidaPage";
			}
		},
		onPageScroll(e) {
			let that = this;
			const query1 = uni.createSelectorQuery().in(this);
			//获取盒子的高度
			query1.select('.container').boundingClientRect(data => {
				this.page_nav = data.height;
			}).exec();
			//因为导航是滚动的时候才进行渲染的，所以上面获取元素的top值减去当前导航的高度
			var page_scroll = this.page_one - this.page_nav;
			// console.log(page_scroll);
			var page_scroll_one = this.page_list - this.page_nav;
			//判断这是滚动条向上滚动，并且当前滚动的距离《120的时候，才开始进行计算
			if (that.scroll > e.scrollTop) {
				if (e.scrollTop < page_scroll) {
					that.count = 1; //这是确定导航的样式条件
				}
				//如果不加这个&&条件的话，那么他跟上面的条件有冲突，所以会导致count一直是2
				if (e.scrollTop < page_scroll_one && e.scrollTop >= page_scroll) {
					this.count = 2;
				}
				// console.log("向上滚动"); 
			} else { //反之，向下滚动
				if (e.scrollTop >= page_scroll) {
					// console.log(11)
					this.count = 2;
				}
				if (e.scrollTop >= page_scroll_one) {
					this.count = 3;
				}
			}
			//将当前的滚动的值赋值给一个变量，通过这个变量进行判断当前滚动的距离是向上还是向下的
			that.scroll = e.scrollTop;
			console.log(that.scroll) //滑动的参数值
			console.log(that.scroll > 600)
		},

		onLoad(options) {
			//店铺推荐（商品）
			this.option = options.id
			if (options.paymentPage) {
				this.paymentPage = options.paymentPage
			}
			if (options.exchangeType) {
				this.exchangeType = options.exchangeType
			}
			console.log('分类带过来的id' + this.option)
			console.log(options)
			if (options.id) {
				this.getDetailInfo(options.id);
				this.goodsDetail(options.id);
				this.loadComment(options.id);
			}
			if (options.shareId) {
				this.recordSave(options.shareId, options.id);
			}
			if (options.share == 1) {
				this.fromShare = true
			}
			this.getAreaList();
		},
		onShareAppMessage(res) {
			if (res.from === "button") {
				// 来自页面内分享按钮
				console.log(res.target);
			}
			return {
				title: this.shareTitle,
				imageUrl: this.shareImg,
				path: `/pages/product/goods/goods?id=${this.goodsId}&shopid=${this.shop_id}&share=1&paymentPage=${this.paymentPage}&exchangeType=${this.exchangeType}`,
			};
		},
		computed: {
			Style() {
				return `height:${this.statusBarHeight}px`;
			},
		},
		methods: {
			backFun() {
				uni.navigateBack({
					delta: 1
				})
			},
			getTradeTypeName(id) {
				// 1=保税直供，2=完税进口，3=国内贸易，4=香港直邮，5=海外直邮
				if (id == 1) {
					return '保税直供'
				} else if (id == 2) {
					return '完税进口'
				} else if (id == 3) {
					return '国内贸易'
				} else if (id == 4) {
					return '香港直邮'
				} else if (id == 5) {
					return '海外直邮'
				}
			},
			iconBtn() {
				if (this.fromShare) {
					uni.redirectTo({
						url: '/pages/index/home'
					});
				} else {
					uni.navigateBack();
				}
			},
			goLocal() {
				uni.openLocation({
					latitude: Number(this.shop.tx_latitude),
					longitude: Number(this.shop.tx_longitude),
					name: this.shop.name,
					address: this.shop.address,
					success: function() {
						console.log("success");
					},
				});
				console.log(this.shop)
			},
			// 购物车数量
			cartList() {
				let shop = uni.getStorageSync('shop')
				let nums = 0
				console.log(shop.id)
				this.$http.get(`/cart/list/` + shop.id)
					.then(res => {
						if (res && res.code == 200) {
							if (res.list.length > 0) {
								res.list.forEach(k => {
									k.flag = false
									nums += k.user_cart_list.length
								})
								this.carNums = nums
							} else {
								this.carNums = 0
							}

						}
					})
			},
			goShop() {
				uni.navigateTo({
					// url: "/pages/research/homepage/shopHomepage?shopId=" + this.shop_id,
					url: "/pages/convenienceService/shopDetails?shopId=" + this.shop_id
				});

			},
			recordSave(share_user_id, goods_id) {
				this.$http
					.post("/share/record/save", {
						share_user_id: share_user_id,
						goods_id: goods_id,
					})
					.then((res) => {});
			},
			collection() {
				let token = uni.getStorageSync("token");

				if (!token) {
					uni.navigateTo({
						url: "/pages/research/register/login",
					});
				} else {

					if (this.isCollection) {
						this.$http
							.delete("/collect/goods/delete/" + this.dataForm.id)
							.then((res) => {
								if (res && res.code == 200) {
									this.isCollection = false;
									this.$mUtil.toast("取消收藏成功");
								} else {
									this.$mUtil.toast(res.msg);
								}
							});
					} else {
						this.$http
							.put("/collect/goods/save", {
								goods_id: this.dataForm.id
							})
							.then((res) => {
								if (res && res.code == 200) {
									this.isCollection = true;
									this.$mUtil.toast("收藏成功");
								} else {
									this.$mUtil.toast(res.msg);
								}
							});
					}
				}
			},

			share() {
				let token = uni.getStorageSync("token");

				if (!token) {
					uni.navigateTo({
						url: "/pages/research/register/login",
					});
				} else {
					this.$http.get('/goods/info/' + this.option).then((res) => {
						if (res && res.code == 200) {
							if (res.data == null) {
								this.$mUtil.toast("该商品不存在")
							} else {
								let user = uni.getStorageSync("personal");
								this.dataForm = res.data;
								this.isvisible = true;
								this.$nextTick(() => {
									this.$refs.shares.shareInfo(
										"/?pageType=1&type=1&id=" + this.goodsId + "&shareId=" + user
										.id,
										'pages/down',
										this.dataForm.title,
										"",
										this.dataForm.cover
									);
								});
							}
						}
					})


				}
			},
			// 获取主页数据
			getIndexList(shopid) {
				this.$http.get("/yxt/shop/info/" + shopid).then((res) => {
					uni.stopPullDownRefresh();
					this.loading = false;
					if (res.data && res.code == 200) {
						this.shop = res.data;
					}
				});
			},
			getByShop(id) {
				//店铺优惠查询
				this.$http.get("/marketing/firstOrder/getByShop/" + id).then((res) => {
					if (res && res.code == 200) {
						this.shopDiscounts = res.data;
					}
				});
			},
			getDetailInfo(id) {
				this.$http.get("/goods/info/" + id).then((res) => {
					this.loading = false;
					if (res && res.code == 200) {
						this.dataForm = res.data;
						this.goodsId = res.data.id;
						this.imglist = res.data.images;
						this.shareImg = res.data.cover;
						this.shareTitle = res.data.title;
						this.dataShopId = res.data.shop_id;
						this.shop_id = res.data.shop_id;
						this.getByShop(this.dataShopId);
						this.getIndexList(this.dataShopId);
					}
				});
				let token = uni.getStorageSync("token");

				if (token) {
					this.$http.get("/collect/goods/is-collect/" + id).then((res) => {
						if (res && res.code == 200) {
							this.isCollection = res.data;
						}
					});
				}
			},
			// 客服
			async goIm() {
				let token = uni.getStorageSync("token");
			
				if (!token) {
					uni.navigateTo({
						url: "/pages/research/register/login",
					});
				} else {
					uni.navigateTo({
						url: "/pages/imv9/tipsPages?shopId=" + this.shop_id,
					});
				}
			},
			goTocart() {
				uni.switchTab({
					url: "/pages/index/shop",
				});
			},
			//点击拼团更多
			goGb() {
				this.$refs.gbOpen.open();
			},
			//点击关闭
			gbClose() {
				this.$refs.gbOpen.close();
			},
			//评论，商品详情切换
			change(i) {
				this.isChecked = i;
				console.log("isChecked", this.isChecked)
			},
			//点购物车，立即购买
			buy(i, id) {
				// 【普通商品】才能加入购物车，【1服务体系礼包,2新人惠选区,3公益申领】不能加入购物车
				// if (i == 0 && (!this.dataForm || this.dataForm.area_feature != 1)) {
				// 	uni.showToast({
				// 		icon: 'none',
				// 		title: '该商品不可加入购物车'
				// 	})
				// 	return false;
				// }

				this.btnType = i;
				this.checkSku(id);
				if (i == 0) {
					this.btnName = "加入购物车";
				} else {
					this.btnName = "立即购买";
				}
			},
			// 减数量
			resNum() {
				if (this.add_num > 1) {
					this.add_num--;
				}
			},
			//加数量
			addNum() {
				this.add_num++;
			},
			chonseSku(index, id) {
				this.skuTab[index].values.forEach((res) => {
					res.flag = false;
					if (res.id == id) {
						res.flag = true;
					}
				});
				let choseId = [];
				this.skuTab.forEach((res) => {
					res.values.forEach((Key) => {
						if (Key.flag) {
							choseId.push(Key.id);
						}
					});
				});
				let totalId = choseId.sort().join("|");
				this.hasId = totalId;
				this.goodsSkuList.forEach((res) => {
					if (res.sku_hash_code == totalId) {
						this.choseConfig = res;
						this.stock = res.able_stock;
						this.able_stock = res.able_stock;
					}
				});
				console.log(this.goodsSkuList)
				console.log('goodsSkuList')
			},
			//查询sku
			checkSku(id) {

				this.$http.get(`/goods/skus/${this.shop_id}/${id}`).then((res) => {
					this.loading = false;
					if (res && res.code == 200) {
						// this.choseConfig = {};
						this.hasId = ''
						res.data.goods.sku_table.forEach((keys) => {
							keys.values.forEach((val) => {
								val.flag = false;
							});
						});
						this.limit_buy_num = res.data.goods.limit_buy_num;
						this.goods_id = res.data.goods.id;
						this.goodsSkuList = res.data.goods_sku_list;
						this.moPrice = res.data.goods.min_sale_price;
						this.moDelPrice = res.data.goods.max_sale_price;
						this.cover = res.data.goods.cover;
						this.stock = res.data.total_stock;
						this.third = res.data.goods.third;
						this.trade_type_id = res.data.goods.trade_type_id;

						if (res.data.goods_auth) {
							if (res.data.goods_auth.added) {
								this.$refs.specOpen.open();
							} else {
								this.$mUtil.toast("该商品已经下架");
							}
						} else {
							this.$mUtil.toast("没有经营权限");
						}
						//只有没数据才去重新渲染sku的数据
						if (this.skuTab.length == 0) {
							this.skuTab = res.data.goods.sku_table;
							for (let i in this.skuTab) {
								//默认选中第一个可选项
								this.skuTab[i].values[0].flag = true;
							}
							//显示选中的sku信息
							// this.chonseSku(0, this.skuTab[0].values[0].id);
						}
						//显示选中的sku信息
						this.chonseSku(0, this.skuTab[0].values[0].id);
						console.log(this.skuTab)
						console.log('skuTab')
						// if(res.data.goods.sku_table.length>0){
						// 	this.$refs.specOpen.open()
						// }else{
						// 	this.hasId = ''
						// 	this.btnBuy()
						// }
					}
				});
			},
			//关闭规格弹窗
			specOpenClose() {
				this.$refs.specOpen.close();
			},
			//加入购物车
			btnBuys() {
				// 判断是否选中sku
				if (this.skuTab.length > 0 && this.hasId.split('|').length < this.skuTab.length) {
					this.$mUtil.toast("请选中分类");
					return false;
				}

				// 判断限购
				if (this.add_num > this.limit_buy_num && this.limit_buy_num != 0) {
					this.$mUtil.toast("商品限购" + this.limit_buy_num + "件");
					return false;
				}
				//判断库存
				if (this.goodsSkuList.length > 0 && this.able_stock < this.add_num) {
					this.$mUtil.toast("商品库存只有" + this.able_stock + "件");

					this.$http.post(`/singlegoods/understockrecord/save`, {
						shop_id: this.shop_id,
						goods_id: this.goods_id,
						single_goods_id: this.choseConfig.single_goods_id,
						sku_set_name: this.choseConfig.sku_set_name,
						buy_num: this.add_num
					}).then((res) => {

					});

					return false;
				}
				if (this.goStatus == 0) {
					let data = {
						goods_id: this.goods_id,
						sku_hash_code: this.hasId,
						add_num: this.add_num,
						source_shop_id: this.shop_id.toString(),
					};
					this.$http.post(`/cart/add`, data).then((res) => {
						if (res && res.code == 200) {
							this.$mUtil.toast("添加成功");
							this.$refs.specOpen.close();
							this.choseConfig = {};
							this.add_num = 1;
							this.cartList();
						}
					});
				} else {
					this.psotJson();
					//如果是“服务体系商品”
					// if (this.dataForm.area_feature == 1 && this.dataForm.service_package_area != 1) {
					// 	if (this.dataForm.service_package_area != 7) {
					// 		switch (this.dataForm.service_package_area) {
					// 			case 6:
					// 				this.areaLevel = [{
					// 					levelName: '省',
					// 					propName: 'province_name',
					// 					propValue: 'province_code'
					// 				}];
					// 				break;
					// 			case 5:
					// 				this.areaLevel = [{
					// 					levelName: '省',
					// 					propName: 'province_name',
					// 					propValue: 'province_code'
					// 				}, {
					// 					levelName: '市',
					// 					propName: 'city_name',
					// 					propValue: 'city_code'
					// 				}];
					// 				break;
					// 			case 4:
					// 				this.areaLevel = [{
					// 					levelName: '省',
					// 					propName: 'province_name',
					// 					propValue: 'province_code'
					// 				}, {
					// 					levelName: '市',
					// 					propName: 'city_name',
					// 					propValue: 'city_code'
					// 				}, {
					// 					levelName: '区',
					// 					propName: 'area_name',
					// 					propValue: 'area_code'
					// 				}];
					// 				break;
					// 			case 3:
					// 				this.areaLevel = [{
					// 					levelName: '省',
					// 					propName: 'province_name',
					// 					propValue: 'province_code'
					// 				}, {
					// 					levelName: '市',
					// 					propName: 'city_name',
					// 					propValue: 'city_code'
					// 				}, {
					// 					levelName: '区',
					// 					propName: 'area_name',
					// 					propValue: 'area_code'
					// 				}, {
					// 					levelName: '街道',
					// 					propName: 'street_name',
					// 					propValue: 'street_code'
					// 				}];
					// 				break;
					// 			case 2:
					// 				this.areaLevel = [{
					// 					levelName: '省',
					// 					propName: 'province_name',
					// 					propValue: 'province_code'
					// 				}, {
					// 					levelName: '市',
					// 					propName: 'city_name',
					// 					propValue: 'city_code'
					// 				}, {
					// 					levelName: '区',
					// 					propName: 'area_name',
					// 					propValue: 'area_code'
					// 				}, {
					// 					levelName: '街道',
					// 					propName: 'street_name',
					// 					propValue: 'street_code'
					// 				}, {
					// 					levelName: '社区',
					// 					propName: 'community_name',
					// 					propValue: 'community_code'
					// 				}];
					// 				break;
					// 		}
					// 		this.submitPopup();
					// 		return;
					// 	} else {
					// 		this.areaLevel = this.checkAreaList.map(item => {
					// 			return {
					// 				levelName: '省',
					// 				propName: 'province_name',
					// 				propValue: 'province_code'
					// 			}
					// 		})
					// 		this.submitPopup();
					// 		return;
					// 	}
					// }

				}
			},
			//组合数据
			psotJson() {
				// this.loading = true;
				let dataJson = {};
				let childArr = [];
				let parendArr = [];
				// let shop = uni.getStorageSync('shop')
				// let shopid = shop.id ? shop.id : ''
				childArr.push({
					user_cart_id: 0,
					activity_goods_id: "0",
					goods_id: this.goods_id,
					num: this.add_num,
					sku_hash_code: this.hasId,
				});
				parendArr.push({
					shop_id: this.dataShopId,
					source_shop_id: this.shop_id,
					activity_id: 0, //活动id
					sponsor_activity_id: 0, //拼团id
					user_remark: "",
					items: childArr,
				});
				if (this.dataForm.service_package_area == 7) {
					let checkAreaList = this.checkAreaList.filter(item => {
						return !!item.province_code
					})
					this.checkAreaList = checkAreaList;
				}
				dataJson = {
					is_cart: false, //是否来源于购物车
					receipt_id: null,
					shipment_mode: 0, //0物流，1自提
					shop_orders: parendArr,
					marketing_type: 0, //0无活动，1秒杀，2拼团
					// service_system_goods: this.dataForm.area_feature == 1 ? true : undefined, // 是否是服务体系商品
					// service_package_area: this.dataForm.area_feature == 1 ? this.dataForm.service_package_area :
					// 	undefined, // 服务体系商品类型
					// select_areas: this.dataForm.area_feature == 1 ? this.checkAreaList : undefined,
					free: this.dataForm.free
				};
				uni.setStorageSync("dataJson", dataJson);
				//let originalPrice = this.dataForm.max_market_price // 原价
				//let zhe = ((this.dataForm.min_sale_price / this.dataForm.max_market_price) *10).toFixed(1) // 折扣
				uni.navigateTo({
					url: "../surePay/surePay?third=" + this.third + '&trade_type_id=' + this.trade_type_id +
						'&paymentPage=' + this.paymentPage + '&exchangeType=' + this.exchangeType
				});
				// let shop = uni.getStorageSync('shop')
				// let shopid=shop.id?shop.id:''
				// this.loading = false;
				// this.$http.post(`/order/build`, dataJson).then(res => {
				// 	if (res && res.code == 200) {
				// 		uni.setStorageSync('sureData', res.data)
				// 		uni.navigateTo({
				// 			url: '../surePay/surePay'
				// 		})
				// 	}
				// })
			},
			//
			btnBuy(i) {
				this.goStatus = i;
				let token = uni.getStorageSync("token");
				//判断是否微信授权登录（没有授权登录进wx-login,授权了但没有注册进login）
				if (!token) {
					uni.navigateTo({
						url: "/pages/research/register/login",
					});
				} else {
					this.btnBuys();
				}

				//0  购物车，1 立即购买
			},


			/**
			 * 详情
			 * */
			goodsDetail(id) {
				this.$http.get(`/goods/content/${id}`).then((res) => {
					if (res && res.code == 200) {
						this.goodsInfo = res.data;
					}
				});
			},

			/*评论*/
			loadComment(id) {
				this.$http
					.get(`/comment/orderGoods/getgoodscomments/${id}`)
					.then((res) => {
						if (res && res.code == 200) {
							this.commentList = res.list;
						}
					});
			},
			submitPopup() {
				this.$refs.submitPopup.open();
			},
			closePopup() {
				this.$refs.submitPopup.close();
			},
			//获取省市区、街道、社区
			getAreaList(parentCode = 100000, columnIndex = 0) {
				this.$http.get(`/cnarea/lbs-children/${parentCode}`, {}).then(res => {
					if (res && res.code == 200) {
						this.$set(this.areaList, columnIndex, res.list);
					}
				});
			},
			//地区选择
			areaChange(e, columnIndex) {
				let rowIndex = e.detail.value;
				let oldColumnIndex = this.areaIndex[columnIndex];
				this.areaIndex[columnIndex] = rowIndex;
				//非 “大区公司”等级
				if (this.dataForm.service_package_area != 7) {
					// 查询下级地区
					this.getAreaList(this.areaList[columnIndex][rowIndex].value, columnIndex * 1 + 1);
					//保存当前选择的数据，用于提交
					this.checkAreaList[0][this.areaLevel[columnIndex].propName] = this.areaList[columnIndex][rowIndex]
						.label;
					this.checkAreaList[0][this.areaLevel[columnIndex].propValue] = this.areaList[columnIndex][rowIndex]
						.value;
					// 重置选择的下级地区的值
					if (oldColumnIndex != rowIndex) {
						let props = ['province', 'city', 'area', 'street', 'community'] // 重置选择的下级列表的值
						let preName = this.areaLevel[columnIndex].propName.split('_name')[0]; //属性名前缀
						let startIndex = props.indexOf(preName);
						for (let i = startIndex; i < props.length; i++) {
							if (i > startIndex) {
								this.checkAreaList[0][props[i] + '_name'] = '';
								this.checkAreaList[0][props[i] + '_code'] = '';
							}
						}
					}

				} else {
					this.$set(this.areaList, columnIndex * 1 + 1, this.areaList[0]);
					this.checkAreaList[columnIndex][this.areaLevel[columnIndex].propName] = this.areaList[columnIndex][
						rowIndex
					].label;
					this.checkAreaList[columnIndex][this.areaLevel[columnIndex].propValue] = this.areaList[columnIndex][
						rowIndex
					].value;
				}
			},
			// 校验地区选择
			valArea() {
				let length = 0;
				let error = '';
				for (let i in this.areaLevel) {
					if (!this.checkAreaList[0][this.areaLevel[i].propValue]) {
						error = '请选择' + this.areaLevel[i].levelName;
						break;
					}
				}
				return error;
			},
			//来自“服务体系礼包”的购买
			submitByService() {
				let error = this.valArea();
				if (error) {
					uni.showToast({
						icon: 'none',
						title: error
					})
				} else {
					this.closePopup();
					this.psotJson();
				}
			},
			addArea() {
				this.checkAreaList.push({
					province_name: '',
					province_code: '',
					city_name: '',
					city_code: '',
					area_name: '',
					area_code: '',
					street_name: '',
					street_code: '',
					community_name: '',
					community_code: ''
				});
				this.areaLevel.push({
					levelName: '省',
					propName: 'province_name',
					propValue: 'province_code'
				});
				this.$set(this.areaList, this.checkAreaList.length - 1, this.areaList[0]);
			}
		}
	}
</script>

<style lang="scss" scoped>
	@font-face {
		font-family: 'hxicon';
		/* project id 2009392 */
		src: url(data:font/truetype;charset=utf-8;base64,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) format('truetype');
	}

	@font-face {
		font-family: 'iconfont';
		/* project id 2070236 */
		src: url('//at.alicdn.com/t/font_2070236_id1ac7qapa.eot');
		src: url('//at.alicdn.com/t/font_2070236_id1ac7qapa.eot?#iefix') format('embedded-opentype'),
			url('//at.alicdn.com/t/font_2070236_id1ac7qapa.woff2') format('woff2'),
			url('//at.alicdn.com/t/font_2070236_id1ac7qapa.woff') format('woff'),
			url('//at.alicdn.com/t/font_2070236_id1ac7qapa.ttf') format('truetype'),
			url('//at.alicdn.com/t/font_2070236_id1ac7qapa.svg#iconfont') format('svg');
	}



	.hxicon {
		font-family: hxicon;
		font-size: 20px;
		font-style: normal;
		/* #ifndef APP-PLUS-NVUE */
		-webkit-font-smoothing: antialiased;
		-webkit-text-stroke-width: 0.2px;
		-moz-osx-font-smoothing: grayscale;
		/* #endif */

	}

	.marginTop {
		margin-top: 5px;
	}

	.buttom-img {
		width: 40rpx;
		height: 40rpx;
	}

	.price-zhe {
		display: flex;
		align-items: baseline;
	}

	.slotBox {
		position: fixed;

		.back {
			padding: 0 13rpx;
		}
	}

	.love-color {
		width: 36rpx;
		height: 36rpx;
	}

	.tag {
		display: inline-block;
		text-align: center;
		width: 92rpx;
		height: 31rpx;
		background: linear-gradient(135deg, #FF466D 0%, #FF211F 100%);
		border-radius: 6rpx 6rpx 6rpx 6rpx;
		font-weight: 500;
		font-size: 19rpx;
		color: #FFFFFF;
		line-height: 23rpx;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;

	}

	.collectionActive {
		color: #ff0000;
		font-size: 45rpx;
		transform: scale(1.2);
	}

	page {
		background-color: #f5f5f5;
	}

	.pd24 {
		padding: 24rpx;
	}

	.pd20 {
		padding: 20rpx;
	}

	.pt20-pb14 {
		padding-top: 20rpx;
		padding-bottom: 14rpx;
	}

	.pt28-pb18 {
		padding-top: 28rpx;
		padding-bottom: 18rpx;
	}

	.pb30 {
		padding-bottom: 30rpx;
	}

	.pb40 {
		padding-bottom: 40rpx;
	}

	.pb50 {
		padding-bottom: 50rpx;
	}

	.pt-pb30 {
		padding-top: 30rpx;
		padding-bottom: 30rpx;
	}

	.pt-pb35 {
		padding-top: 35rpx;
		padding-bottom: 35rpx;
	}

	.ml54 {
		margin-left: 54rpx;
	}

	.ml138 {
		margin-left: 138rpx;
	}

	.br-rd10 {
		border-radius: 10rpx;
	}

	.br-rd20 {
		border-radius: 20rpx;
	}

	.stb-btn {
		padding: 8rpx 18rpx;
		border-radius: 10rpx;
	}

	.br-FF0000 {
		border: 1rpx solid #ff0000;
		border-radius: 24rpx;
		padding: 6rpx 12rpx;
	}

	.bg-FFF6EE {
		background-color: #fff6ee;
	}

	.mt80 {
		margin-top: 80rpx;
	}

	.product {
		// padding-bottom: 150rpx;
	}

	.pic {
		width: 712rpx;
		height: 227rpx;
		background: #FFFFFF;
		border-radius: 19rpx 19rpx 19rpx 19rpx;
		margin-top: 19rpx;
		margin-left: 19rpx;
		width: 100%;

	}

	.richText {
		padding: 30rpx;

		/deep/ img {
			margin-top: 0 !important;
			vertical-align: middle;
		}
	}

	//秒杀，拼团样式
	.p-ab {
		position: absolute;
		top: 448rpx;
	}

	.stb-list {
		padding-bottom: 10rpx;
	}

	.triangle-bottomright {
		width: 0;
		height: 0;
		border-bottom: 108rpx solid #dccda4;
		border-left: 60rpx solid transparent;
	}

	.seckill {
		background-color: #dccda4;
		color: #FF721B;
		padding: 16rpx;
		padding-right: 28rpx;
		border-radius: 5rpx 20rpx 0px 0px;
	}

	.seckill-btn {
		width: 86%;
	}

	.br-284534 {
		border-bottom: 1rpx solid rgba($color: #FF721B, $alpha: 0.3);
	}

	.gb-te {
		padding-top: 20rpx;
		padding-bottom: 15rpx;
	}

	.gb-btn {
		padding: 18rpx 80rpx 8rpx;
		line-height: 30rpx;
	}

	.btn-bg-dccda4 {
		background: #dccda4;
		border-radius: 48rpx 0rpx 0rpx 48rpx;
	}

	.btn-bg-00321E {
		background: #FF721B;
		border-radius: 0px 48px 48px 0px;
	}

	.tab {
		width: 711rpx;
		margin: 0 auto;
		position: sticky;
		top: 81rpx;
		background-color: #fff;
		z-index: 9;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		height: 104rpx;
		border-radius: 19rpx;

		.box-border {
			display: flex;
			justify-content: space-around;
			padding: 20rpx 0;
			margin: 0 auto;
		}

		.tabColor {
			position: relative;
			color: #474747;
			font-size: 36rpx;
			display: flex;
			flex-direction: column;
			justify-content: flex-start;
			align-items: center;
			width: 356rpx;


		}
	}

	.bottom-btn {
		position: fixed;
		bottom: 0;
		z-index: 9;
		width: 100%;
		// height: 94rpx;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		height: 94rpx;
		background-color: #fff;
		padding: 0 19rpx;
		box-sizing: border-box;


		.leftbox {
			display: flex;
			align-items: center;
			justify-content: space-around;
			height: 75rpx;

			.u-text-center {
				margin-right: 20rpx;
			}
		}

		.cart {
			position: relative;

			.car-icon {
				position: relative;

				.nums {
					font-size: 24rpx;
					color: #FFFFFF;
					font-weight: 400;
					padding: 0 12rpx;
					background-color: #FF0000;
					border-radius: 15rpx;
					position: absolute;
					right: 5rpx;
					top: -10rpx;
				}
			}

			.number {
				position: absolute;
				top: -10rpx;
				left: 45rpx;
				padding: 4rpx 8rpx;
				background-color: #ff0000;
				border: 4rpx solid #ffffff;
				border-radius: 40rpx;
			}
		}

		.cart-btn {
			width: 240rpx;
			height: 77rpx;
			background: #FFFFFF;
			border-radius: 19rpx 0rpx 0rpx 19rpx;
			border: 2rpx solid #FF211F;
			font-weight: 500;
			font-size: 29rpx;
			color: #FF211F;
			line-height: 34rpx;
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
		}

		.buy-btn {
			width: 240rpx;
			height: 77rpx;
			background: #FF211F;
			border-radius: 0rpx 19rpx 19rpx 0rpx;
			font-weight: 500;
			font-size: 29rpx;
			color: #FFFFFF;
			line-height: 34rpx;
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
		}
	}

	.flex-sb {
		display: flex;
		justify-content: space-between;
	}

	//弹窗
	.spec {
		// border-radius: 18rpx 18rpx 0rpx 0rpx;
		// padding-top: 30rpx;
		// // max-height: 900rpx;
		// overflow-y: auto;
		width: 750rpx;
		// height: 712rpx;
		height: auto;
		background: #FFFFFF;
		border-top-left-radius: 50rpx;
		border-top-right-radius: 50rpx;

		// padding-bottom: constant(safe-area-inset-bottom);
		// padding-bottom: env(safe-area-inset-bottom);
		.spec-item {
			width: auto;
			height: 54rpx;
			background: #F7F7F7;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			font-weight: 400;
			font-size: 23rpx;
			color: #999999;
			line-height: 23rpx;
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
			padding: 15rpx 19rpx;
			margin-bottom: 19rpx;
		}

		.activeColor {
			width: auto;
			height: 54rpx;
			background: #FFFFFF;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			border: 2rpx solid #FF211F;
			font-weight: 400;
			font-size: 23rpx;
			color: #FF211F;
			line-height: 23rpx;
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
		}



		//减号
		.minus {
			width: 50rpx;
			height: 50rpx;
			line-height: 50rpx;
			text-align: center;
			background: #FFFFFF;
			border-radius: 15rpx 0rpx 0rpx 15rpx;
			color: #AAAAAA;
			border: 1rpx solid #dedede;
			font-size: 20rpx;
		}

		.num {
			width: 74rpx;
			height: 50rpx;
			line-height: 50rpx;
			text-align: center;
			border: 1px solid #dedede;
		}

		//加号
		.plus-sign {
			width: 50rpx;
			height: 50rpx;
			line-height: 50rpx;
			text-align: center;
			background: #FFFFFF;
			color: #AAAAAA;
			border: 1rpx solid #dedede;
			border-radius: 0rpx 15rpx 15rpx 0rpx;
			font-size: 20rpx;
		}

		.specOpen-btn {
			margin-top: 68rpx;
			padding-bottom: 34rpx;

			button {
				background-color: #FF721B;
				color: #ffffff;
			}
		}
	}

	.jvideo {
		.playIcon {
			width: 100rpx;
		}
	}

	.tip-popup {
		.content-box {
			width: 690rpx;

			.content {
				height: 100%;
				overflow: auto;
				box-sizing: border-box;
				background: white;
			}
		}

		.check-tip {
			font-size: 28rpx;
			font-family: PingFang SC, PingFang SC-Regular;
			font-weight: 400;
			text-align: left;
			color: #1a1a1a;
			margin-bottom: 10rpx;
			padding: 0 30rpx;
			position: relative;

			&.required {
				&:before {
					content: '*';
					font-size: 32rpx;
					font-family: PingFang SC, PingFang SC-Regular;
					font-weight: 400;
					text-align: left;
					color: #ff0000;
					vertical-align: middle;
					margin-right: 2rpx;
				}
			}
		}

		.content {
			.tip {
				width: auto !important;
				padding-left: 30rpx;
				padding-right: 30rpx;
				text-align: center;
			}

			.add-area {
				width: 630rpx;
				background: white;
				color: #FF721B;
				border: 1px dashed #FF721B;
				height: 75rpx;
				line-height: 75rpx;
				font-size: 30rpx;
				margin: 40rpx auto 60rpx auto;
				border-radius: 20rpx;
			}
		}
	}

	.check-input {
		display: flex;
		justify-content: space-between;
		align-items: center;
		text-align: left;
		background: #ffffff;
		border-radius: 10px;
		width: 630rpx;
		min-height: 70rpx;
		border: 1px solid #cccccc;
		margin: 0 30rpx;
		padding: 15rpx 21rpx;
		margin-bottom: 25rpx;
	}

	.backClass {
		width: 750rpx;
		height: 665rpx;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		position: relative;
	}

	.backClassSearch {
		position: absolute;
		top: 0;
		left: 12rpx;
		// width: 750rpx;
		height: 104rpx;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		z-index: 999;
	}

	.swiper {
		height: 665rpx;
		width: 100%;

		video {
			width: 100%;
			height: 665rpx;
		}

		image {
			width: 100%;
			height: 665rpx;
		}
	}

	.picTop {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		height: 77rpx;
		padding: 0 19rpx;
		box-sizing: border-box;
	}

	.picTopOne {
		font-weight: bold;
		font-size: 38rpx;
		color: #FF211F;
		line-height: 38rpx;
		margin-right: 12rpx;
		margin-left: 19rpx;
	}

	.picTopTwo {
		font-weight: 500;
		font-size: 23rpx;
		color: #BCBCBC;
		line-height: 17rpx;
		text-decoration: line-through;
	}

	.picTopThree {
		font-weight: 400;
		font-size: 23rpx;
		color: #999999;
		line-height: 23rpx;
	}

	.picTopLeft {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
	}

	.productView {
		width: 712rpx;
		height: auto;
		background: #FFFFFF;
		border-radius: 19rpx 19rpx 19rpx 19rpx;
		margin-top: 19rpx;
		margin-left: 19rpx;
		margin-bottom: 19rpx;
	}

	.shopTitle {
		font-weight: 600;
		font-size: 27rpx;
		color: #333333;
		line-height: 38rpx;
		min-height: 27rpx;
		padding-left: 19rpx;
		box-sizing: border-box;
	}

	.sold {
		font-weight: 400;
		font-size: 23rpx;
		color: #999999;
		line-height: 23rpx;
		margin-left: 19rpx;
		margin-top: 31rpx;
		padding-bottom: 19rpx;

	}

	.shopStore {
		width: 712rpx;
		height: 115rpx;
		background: #FFFFFF;
		border-radius: 19rpx 19rpx 19rpx 19rpx;
		margin-left: 19rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		padding: 0 19rpx;
		box-sizing: border-box;
		margin-bottom: 19rpx;
	}

	.avatarView {
		width: 77rpx;
		height: 77rpx;
		margin-right: 19rpx;
	}

	.shopName {}

	.shopName view:nth-child(1) {
		font-weight: 500;
		font-size: 23rpx;
		color: #020202;
		line-height: 23rpx;
	}

	.shopName view:nth-child(2) {
		font-weight: 400;
		font-size: 19rpx;
		color: #999999;
		line-height: 23rpx;
		margin-top: 11rpx;
	}

	.rightImage {
		width: 8rpx;
		height: 15rpx;
	}

	.userComments {
		width: 712rpx;
		height: 69rpx;
		background: #FFFFFF;
		border-radius: 19rpx 19rpx 19rpx 19rpx;
		margin-top: 19rpx;
		margin-left: 19rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		padding: 0 19rpx;
		box-sizing: border-box;
		margin-bottom: 19rpx;
	}

	.userCommentsItem {
		font-weight: 500;
		font-size: 23rpx;
		color: #333333;
		line-height: 27rpx;
	}



	.tabColorTitle {
		font-weight: 400;
		font-size: 27rpx;
		color: #333333;
		line-height: 32rpx;
		width: 356rpx;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}

	.active {
		font-weight: 600;
		font-size: 27rpx;
		color: #FF211F;
		line-height: 32rpx;
	}

	.viewClass {
		font-weight: 400;
		font-size: 19rpx;
		color: #333333;
		line-height: 23rpx;
		margin-top: 4rpx;
	}

	.collcat {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		text-align: center;
	}

	.buy-btnXin {
		width: 480rpx;
		height: 77rpx;
		background: #FF211F;
		border-radius: 19rpx;
		font-weight: 500;
		font-size: 29rpx;
		color: #FFFFFF;
		line-height: 34rpx;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}

	.shopImage {
		width: 211rpx;
		height: 211rpx;
		margin-top: 38rpx;
		margin-left: 38rpx;
	}

	.closeImage {
		width: 46rpx;
		height: 46rpx;
		margin-top: 38rpx;
		margin-right: 38rpx;
	}

	.priceView {
		margin-left: 39rpx;
	}

	.price-zhe-left {
		font-weight: 600;
		font-size: 38rpx;
		color: #FF211F;
		line-height: 38rpx;
	}

	.price-zhe-right {
		font-weight: 500;
		font-size: 23rpx;
		color: #BCBCBC;
		line-height: 17rpx;
		margin-left: 12rpx;
	}

	.inventory {
		font-weight: 400;
		font-size: 23rpx;
		color: #999999;
		line-height: 23rpx;
		margin-top: 19rpx;
	}

	.selectView {
		font-weight: 400;
		font-size: 23rpx;
		color: #999999;
		line-height: 23rpx;
		margin-top: 29rpx;
	}

	.selectViewText {
		font-weight: 400;
		font-size: 23rpx;
		color: #999999;
		line-height: 23rpx;
	}

	.selectViewName {
		width: auto;
		height: 35rpx;
		background: #F7F7F7;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		padding: 6rpx 16rpx;
		margin-left: 35rpx;
	}

	.specifications {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: flex-start;
	}

	.marginLeft39 {
		margin-left: 39rpx;
	}

	.specificationsTitle {
		margin-top: 31rpx;
	}

	.marginTop19 {
		margin-top: 19rpx;
	}

	.numView {
		margin-top: 12rpx;
		padding-left: 38rpx;
		padding-right: 38rpx;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;

		.payNum {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			width: 100%;

			.numViewClass {
				font-weight: 600;
				font-size: 29rpx;
				color: #333333;
				line-height: 27rpx;
			}
		}
	}

	.btnView button {
		width: 673rpx;
		height: 88rpx;
		background: #FF211F;
		border-radius: 19rpx 19rpx 19rpx 19rpx;
		font-weight: 400;
		font-size: 29rpx;
		color: #FFFFFF;
		line-height: 40rpx;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		margin: 42rpx 0;

	}

	.width100 {
		width: 100% !important;
		border-radius: 0;
	}

	.backImage {
		width: 17rpx;
		height: 31rpx;
		// padding-left: 26rpx;
		
		
		position: absolute;
		top: 26rpx;
		left: 12rpx;
		// width: 750rpx;
		// height: 104rpx;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		z-index: 999;
	}
</style>